<template>
  <view class="bf">
	  <!-- 头部 -->
    <u-navbar :is-back="false" :border-bottom="false">
      <view class="u-flex u-m-l-20 u-m-r-20">
        <view class="u-font-xl u-m-r-20">购物车</view>
        <view class="u-font-xs u-light-color u-p-t-10">共8件商品</view>
      </view>
    </u-navbar>
	<!-- 购物车商品渲染 -->
    <view class="bf-content">
      <scroll-view scroll-y="true" class="bf-cart-sv-container"  v-if="getCartInfoList">
        <u-checkbox-group>
          <view v-for="item,index in getCartInfoList" :key="index">
            <u-card :padding="10" :border="false" :show-head="true">
              <view slot="head" class="u-m-10" >
                <u-checkbox shape="circle" active-color="red"></u-checkbox>
                <text>{{item.activityRule.ruleDesc }}</text>
              </view>
              <view slot="body">
				  <!-- 二次循环 -->
				  
                <view v-for="listItem,idx in item.cartInfoList" :key="listItem.skuId">
                  <!-- 动态class绑定是为了确保最后一条底部线条不显示 -->
                  <view :class="{'u-border-bottom':idx!==item.cartInfoList.length-1}" class="u-body-item u-flex u-col-between u-p-10">
                    <u-checkbox shape="circle" active-color="red"></u-checkbox>
                    <ListImgItem
                      :lazyLoad="false"
                      :src="listItem.imgUrl"
                      width="200rpx"
                      height="200rpx"
                	  :showRight="false"
                	  :showBottom="listItem.isNewPerson===1"
                	  :showLeft="listItem.skuType===1"
                    ></ListImgItem>
                    <view class="u-p-b-20 u-m-l-20" style="flex:1">
                      <view class="u-font-lg">{{listItem.skuName}}</view>
                      <view class="u-flex u-row-between">
                        <view class="u-type-error">
                          <text>￥</text>
                          <text>{{listItem.cartPrice}}</text>
                        </view>
                        <AddToCart></AddToCart>
                      </view>
                    </view>
                  </view>
                </view>
				
              </view>
            </u-card>
          </view>
        </u-checkbox-group>
      </scroll-view>
		<!-- 购物车底部导航 -->
      <view class="bf-navigation">
        <view class="navigation">
          <view class="left">
            <view class="item u-m-t-20"
              ><u-checkbox shape="circle" active-color="red"></u-checkbox
            ></view>
            <view class="item">
              <view class="u-font-sm u-line-1">
                <view class="u-type-error">现价:￥18.88</view>
                <view class="u-font-xs u-type-info">
                  优惠券优惠:￥1.88
                  <text class="u-font-xs u-m-l-20 u-type-info">原价:</text>
                  <text class="u-font-xs u-type-info">￥29.88</text>
                </view>
              </view>
            </view>
            <view class="item car u-type-info">
              <u-icon
                name="gift-fill"
                :size="40"
                :color="$u.color['contentColor']"
              ></u-icon>
              <view class="text u-line-1">优惠券</view>
            </view>
          </view>
          <view class="right"
            ><view class="buy btn u-line-1">立即购买</view></view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import {mapActions,mapGetters} from "vuex"
	export default {
		data() {
			return {
				
			};
		},
		computed:{
			...mapGetters("cartModule",["getCartInfoList"])
		},
		methods:{
			...mapActions("cartModule",["getActivityCartListAction"])
		},
		
		mounted() {
			this.getActivityCartListAction()
		}
	}
</script>

<style lang="scss" scoped>
.bf {
  height: 100%;
  background-color: $u-bg-color;

  // scrollView的固定高度设置
  // 底部导航与顶部自定义导航高度需要减去
  &-cart-sv-container {
    height: calc(100vh - 90rpx - 136rpx);
  }

  // 底部导航
  &-navigation {
    width: 100%;
    height: 90rpx;
    position: fixed;
    bottom: 0;
    .navigation {
      height: 100%;
      display: flex;
      border: solid 2rpx #f2f2f2;
      background-color: #ffffff;
      padding: 12rpx 0;
      .left {
        display: flex;
        flex: 1;
        font-size: 20rpx;
        .item {
          margin: 0 10rpx;
          &.car {
            text-align: center;
            position: relative;
          }
        }
      }
      .right {
        display: flex;
        font-size: 28rpx;
        align-items: center;
        .btn {
          line-height: 66rpx;
          padding: 0 30rpx;
          border-radius: 36rpx;
          color: #ffffff;
        }
        .buy {
          background-color: #ff7900;
          margin: 0 30rpx;
        }
      }
    }
  }
}
</style>
